<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleTabClick">
    <template v-for="item in optList">
      <el-tab-pane :key="item.code" :name="item.code" :label="item.name">
        <component :is="item.component" v-if="item.code === activeName" />
      </el-tab-pane>
    </template>
  </el-tabs>
</template>
<script>
import trainList from './trainList';
import otherTrainList from './otherTrainList';
import topTrainList from './topTrainList';
export default {
  data() {
    return {
      activeName: '',
      trainType: '',
      optList: [
        {
          code: 'own',
          name: '本部培训',
          component: trainList
        },
        {
          code: 'other',
          name: '其他培训',
          component: otherTrainList
        },
        {
          code: 'top',
          name: '我的置顶',
          component: topTrainList
        }
      ]
    };
  },
  created() {
    this.activeName = this.$route.query.type || 'own';
  },
  methods: {
    handleTabClick(tabItem) {
      this.trainType = this.$route.query.trainType || 'TrainManage';
      this.$router.push({
        path: this.$route.path,
        query: {
          type: tabItem.name,
          trainType: this.trainType
        }
      });
    }
  }
};
</script>
